import React, {Component} from 'react';
import {Image, View, Text, StyleSheet,ImageBackground,TouchableOpacity} from "react-native";
import Header from "../../components/header";

import Swiper from "react-native-deck-swiper";
import {pxToDp} from "../../utils/styleKits";
import icon from "../../utils/icon";

// 探花页面
class Index extends Component {
  data = [
    {
      name: '雾霭朦胧',
      sex: '女',
      age: 21,
      marriage: '未婚',
      education: '大专',
      reason: '年龄相仿',
      img: 'https://www.itying.com/images/flutter/slide01.jpg'
    },
    {
      name: '22222',
      sex: '女',
      age: 26,
      marriage: '未婚',
      education: '本科',
      reason: '年龄相仿',
      img: 'https://www.itying.com/images/flutter/slide02.jpg'
    },
    {
      name: '3333',
      sex: '女',
      age: 26,
      marriage: '已婚',
      education: '本科',
      reason: '年龄相仿333',
      img: 'https://www.itying.com/images/flutter/slide03.jpg'
    },
  ];

  state = {
    cardIndex : 0,
  };

  render() {
    let {cardIndex} = this.state;
    if (this.data.length === 0) return <></>;
    return (
      <View style={{position: 'relative', flex: 1}}>
        {/*顶部导航栏*/}
        <Header title={'探花'}/>

        {/*滑动卡片*/}
        <ImageBackground imageStyle={{height: '100%'}} source={require('../../images/testsoul_bg.png')} style={styles.bg}>
          <Swiper
            infinite
            cards={this.data}
            cardVerticalMargin={pxToDp(10)}
            renderCard={(card) => {
              return (
                <View style={styles.card}>
                  <Image source={{uri: card.img}} style={styles.cardImg}/>
                  <View style={styles.cardInfoOne}>
                    <Text>{card.name} </Text>
                    <Text style={{fontFamily: 'iconfont',color: '#ff587f'}}>{icon.icontanhuanv}</Text>
                    <Text> {card.age}岁</Text>
                  </View>
                  <Text style={styles.cardInfoTwo}>{card.marriage} | {card.education} | {card.reason}</Text>
                </View>
              )
            }}
            onSwiped={(cardIndex) => {this.setState({cardIndex})}}
            cardIndex={cardIndex}
            backgroundColor={'transparent'}
            stackSize= {this.data.length}
            onSwipedLeft={this.swiped.bind(this, 'left')}
            onSwipedRight={this.swiped.bind(this, 'right')}
          >
          </Swiper>
        </ImageBackground>

        <TouchableOpacity onPress={null} style={styles.notLike}>
          <Text style={{fontFamily: 'iconfont',color: '#fff', fontSize: pxToDp(24)}}>{icon.iconbuxihuan}</Text>
        </TouchableOpacity>
        <TouchableOpacity onPress={null} style={styles.like}>
          <Text style={{fontFamily: 'iconfont',color: '#fff', fontSize: pxToDp(24)}}>{icon['iconxihuan-o']}</Text>
        </TouchableOpacity>

      </View>
    );
  }

  // 滑动
  swiped = (direction) => {
    console.log(direction)
  }
}

const styles = StyleSheet.create({
  bg: {
    width: '100%',
    height: '60%',
    resizeMode: 'stretch',
  },
  card: {
    height: '70%',
    borderRadius: 4,
    borderWidth: 2,
    borderColor: "#E8E8E8",
    backgroundColor: "white",
  },
  cardImg: {
    width: '100%',
    height: '80%',
    resizeMode: 'stretch',
    // backgroundColor: 'green',
  },
  cardInfoOne: {
    flexDirection: 'row',
    justifyContent: 'center',
    marginTop: pxToDp(10),
  },
  cardInfoTwo: {
    textAlign: 'center',
    marginTop: pxToDp(10),
  },
  notLike: {
    width: pxToDp(50),
    height: pxToDp(50),
    backgroundColor: '#b7b11c',
    borderRadius: pxToDp(30),
    justifyContent: 'center',
    alignItems: 'center',
    position: 'absolute',
    left: pxToDp(80),
    bottom: pxToDp(30),
  },
  like:{
    width: pxToDp(50),
    height: pxToDp(50),
    backgroundColor: '#e23333',
    borderRadius: pxToDp(30),
    justifyContent: 'center',
    alignItems: 'center',
    position: 'absolute',
    right: pxToDp(80),
    bottom: pxToDp(30),
  }

});

export default Index;